<template>
  <div class="page">
    <div class="fixedRight">
      <!-- <el-button type="primary" icon="" circle></el-button> -->
      <i class="el-icon-setting " @click="dialogSettingVisible = true"></i>
      <i class="el-icon-question" @click="dialogAboutMeVisible = true"></i>
      <!-- <el-button type="primary" icon="el-icon-question" circle></el-button> -->
    </div>
    <div class="form">
      <div class="progressMask">
        <div
          class="progressBtn progressBtn-select"
          v-show="step == 0"
          @click="openFileDialog"
          title="选择路径"
        >
          选择路径
        </div>
        <div
          class="progressBtn progressBtn-start"
          v-show="step == 1"
          @click="start"
          title="开始压缩"
        >
          开始压缩
        </div>
        <div class="progressBtn" v-show="step == 2">
          {{ this.progressNum + "/" + this.progressSumNum }}
        </div>
        <div
          class="progressBtn progressBtn-done"
          v-show="step == 4"
          title="读取中"
        >
          读取中
        </div>
        <div
          class="progressBtn progressBtn-done"
          v-show="step == 3"
          @click="
            () => {
              step = 0;
            }
          "
          title="压缩成功"
        >
          压缩成功
        </div>
        <el-progress
          type="circle"
          :percentage="percentage"
          :show-text="false"
          :format="format"
          @click="handle"
        ></el-progress>
      </div>

      <div class="filePathBox">
        <div
          class="filePath"
          placeholder="请选择路径"
          contenteditable="true"
          @blur="path = $event.target.innerText"
          v-html="path"
        ></div>

        <el-button
          v-if="path"
          class="resetBtn"
          type="danger"
          icon="el-icon-refresh-left"
          circle
          title="重选"
          @click="reset()"
        ></el-button>
      </div>
      <!-- <el-button type="success" slot="append" @click="openFileDialog"
          >选择路径</el-button> -->
      <!-- <el-button type="primary" :disabled="loading"   @click="start" :loading="loading">{{loading?'正在压缩':'开始压缩'}}</el-button> -->
    </div>
    <div class="hide">
      <input
        id="fileInput"
        type="file"
        webkitdirectory="webkitdirectory"
        @change="browseFolder"
      />
    </div>
    <div class="logsBox">
      <el-button
        v-if="log"
        class="cleaLogBtn"
        type="danger"
        icon="el-icon-delete"
        circle
        title="清空日志"
        @click="
          () => {
            log = '';
          }
        "
      ></el-button>
      <div v-html="log" class="logsContent" id=logsContent></div>
    </div>

    <el-dialog title="设置" :visible.sync="dialogSettingVisible" width="90%">
      <el-form :model="setting" label-suffix=":">
        <!-- <el-form-item label="覆盖原文件" :label-width="formLabelWidth">
          <el-radio-group v-model="setting.cover" size="small">
            <el-radio-button :label="true">是</el-radio-button>
            <el-radio-button :label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="输出文件夹名称" :label-width="formLabelWidth">
          <el-input
            v-model="setting.outputDir"
            placeholder="输出文件夹名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogSettingVisible = false"
          >关 闭</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="关于" :visible.sync="dialogAboutMeVisible" width="90%">
      <el-form :model="setting" label-suffix=":" label-position="top">
        <el-form-item label="关于软件" :label-width="formLabelWidth">
          软件支持PNG，JPG，无损压缩，<br />
          软件自身使用Electron+Vue.js+Element实现，<br />压缩图片基于
          https://tinypng.com/ 网的开放压缩API实现
        </el-form-item>
        <el-form-item label="免责声明" :label-width="formLabelWidth">
          此软件仅用于学习和交流，禁止用作商业用途，<br />如有侵权请联系邮箱
          mrlihufeng@163.com
        </el-form-item>
        <el-form-item label="版本信息" :label-width="formLabelWidth">
          当前版本1.0.0，2020-12-07日发布<br/>源码已在Gitee开源地址：<br/> https://gitee.com/lihufeng/little-tiger
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogAboutMeVisible = false"
          >关 闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import service from "@/service/index.js";
export default {
  components: {},
  data() {
    return {
      path: "",
      log: "",
      loading: false,
      progressNum: 0,
      progressSumNum: 0,
      percentage: 0,
      step: 0,
      dialogSettingVisible: false,
      dialogAboutMeVisible: false,
      formLabelWidth: "120px",
      setting: {
        cover: false,
        outputDir: "output",
      },
    };
  },
  // 过滤器
  filters: {},
  computed: {},

  methods: {
    reset(data = {}) {
      this.path = data.path || "";
      this.step = data.step || 0;
      this.percentage = data.percentage || 0;
      this.progressNum = data.progressNum || 0;
      this.progressSumNum = data.progressSumNum || 0;
      this.loading = data.loading || false;
      document.getElementById("fileInput").value = "";
    },
    handle() {
      switch (this.step) {
        case 0:
          this.openFileDialog();
          break;
        case 1:
          this.start();
          break;

        default:
          break;
      }
    },
    format(percentage) {
      switch (this.step) {
        case 0:
          return "选择路径";
        case 1:
          return this.progressNum + "/" + this.progressSumNum;
      }
    },
    dateFtt(fmt, date) {
      //author: meizz
      var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "h+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        S: date.getMilliseconds(), //毫秒
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
      return fmt;
    },
    openFileDialog() {
      // 没走 electron 的文件夹选择api  用的是input=file 来实现选择文件夹
      document.getElementById("fileInput").click();
    },
    outlog(log) {
      if (log && log.errno == -4058) {
        this.reset({ path: this.path });
      }
      this.log +=
        "<br/>" +
        this.dateFtt("yyyy-MM-dd hh:mm:ss", new Date()) +
        ": " +
        log +
        "<br/>";
        setTimeout(() => {
          // 滚动条保持在最下面
        var div = document.getElementById('logsContent');
        div.scrollTop = div.scrollHeight;
        }, 10);
    
    },
    // 进度回调
    progressCb(len) {
      this.step = 2;
      this.progressSumNum = len;
      ++this.progressNum;
      this.percentage = (this.progressNum / this.progressSumNum) * 100;
    },
    //启动压缩
    start() {
      this.step = 4;
      this.loading = true;
      let config = Object.assign({}, this.setting, { cwd: this.path });

      service.startTinypng(config, this.outlog, this.progressCb).then(() => {
        this.step = 3;
      });
    },
    //切换完成状态
    done() {
      this.reset();
    },
    //选择文件夹时
    browseFolder(e) {
      try {
        let files = e.target.files;
        if (files) {
          this.path = files[0].path;
          this.step = 1;
          this.percentage = 0;
          this.progressNum = 0;
          this.progressSumNum = 0;
          this.loading = false;
          // console.log(this.path)
        }
      } catch (e) {
        console.error(e);
        alert(e.message);
      }
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  ctivated() {},
};
</script>

<style lang="scss" scoped>
.hide {
  display: none;
}
.fixedRight {
  i {
    font-size: 30px;
    color: #409eff;
    margin-bottom: 13px;
  }
  position: fixed;
  right: 10px;
  top: 30px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.form {
  margin: 0 auto;
  width: 400px;
  margin-bottom: 40px;
  margin-top: 40px;
  .filePathBox {
    position: relative;
    margin: 0 auto;
    padding-top: 50px;
    border-bottom: 2px solid #ebeef5;
    width: 400px;
    font-size: 19px;

    .filePath {
      width: 80%;
      outline: none;
      border: none;
      font-size: 19px;
      word-break: break-all;

      overflow: hidden;
    }
    .resetBtn {
      position: absolute;
      right: 0px;
      bottom: 0;
      opacity: 0.7;

      display: flex;
      justify-content: center;
      align-content: center;
    }
  }
}
.logsBox {
  position: relative;
  margin: 0 auto;
  width: 400px;
  height: 200px;
  padding-top: 55px;
  color: #000;
  font-size: 14px;
  background: #f2f6fc;
  border-radius: 5px;
  margin-bottom: 20px;
  .cleaLogBtn {
    position: absolute;
    top: 8px;
    left: 50%;
    margin-left: -22px;
    opacity: 0.7;
  }
  .logsContent {
    margin: 0 auto;
    overflow-y: auto;
    width: 95%;
    height: 100%;
    font-size: 16px;
    color: #909399;
    word-break: break-all;
    &::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
  }
}
.progressMask {
  height: 126px;
  width: 126px;
  position: relative;
  margin: 0 auto;
  margin-bottom: 40px;
  .progressBtn {
    height: 100px;
    width: 100px;
    line-height: 100px;
    text-align: center;
    z-index: 99;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
    cursor: pointer;
  }
  .progressBtn-start {
    background: #e6a23c;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    // font-weight: bold;
  }
  .progressBtn-select {
    background: #409eff;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    // font-weight: bold;
  }
  .progressBtn-done {
    background: #67c23a;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    // font-weight: bold;
  }
}
</style>
